<template lang="pug">
	.doctor-list-wrap(:class="{'grey-bg':item.sum_dqkyysl==='0'}" @click="goDetail")
		.doctor-icon
			<!--img(:src="item.doctor_photo?item.doctor_photo:defaultHead")-->
			img(:src="defaultHead")
		.doctor-content
			.doctor-name
				.name {{item.doctor_name||''}}
				.title {{item.doctor_title||''}}
			.sub
				| {{item.doctor_be_good_at||''}}
			.rest-num {{item.restNum}}

</template>

<script>
import defaultHead from '@/assets/image/order/doctorHead.png'
export default {
	name: 'doctor-item',
	data() {
		return {
			defaultHead: defaultHead
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	created() {},
	mounted() {},
	methods: {
		goDetail() {
			this.$emit('listenClick')
		}
	}
}
</script>

<style lang="stylus">
	.doctor-list-wrap
		display flex
		align-items center
		shadowBox()
		margin mainMargin
		padding mainPadding
		.doctor-icon
			width 110px
			height 110px
			border-radius 50%
			overflow hidden
			position relative
			img
				width 100%
				height 100%
		.doctor-content
			flex 1
			position relative
			margin-left 24px
			.doctor-name
				display flex
				align-items center
				padding-bottom 18px
				.name
					font-size 30px
					font-weight 500
					color blackFontColor1A
					line-height 44px
					margin-right 20px
			.title,.sub
				font-size 24px
				color #aaa
				line-height 34px
				height 34px
			.sub
				overflow hidden
				text-overflow ellipsis
				white-space nowrap
				max-width 516px
			.rest-num
				width 80px
				height 36px
				line-height 36px
				background-color themeColor
				border-radius 18px
				color white
				font-size 24px
				position absolute
				top 0
				right 0
				text-align center
		&.grey-bg
			.doctor-icon
				&:before
					content ''
					position absolute
					cover()
					background rgba(255,255,255,.3)
			.doctor-name
				.name
					color grayFontColor88
			.rest-num
				background-color grayFontColor
</style>
